<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Portfolio Webpage</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

    <link rel="stylesheet" href="color-1.css" class="alternate-style" title="color-1" disabled>
    <link rel="stylesheet" href="color-2.css" class="alternate-style" title="color-2" disabled>
    <link rel="stylesheet" href="color-3.css" class="alternate-style" title="color-3" disabled>
    <link rel="stylesheet" href="color-4.css" class="alternate-style" title="color-4" >
    <link rel="stylesheet" href="color-5.css" class="alternate-style" title="color-5" disabled>
</head>
<body class="dark">
    <div class="main-container">
        <div class="aside">
            <div class="logo">
                <a href="#"><span>A</span>tlas</a>
            </div>

            <div class="nav-toggler">
                <span></span>
            </div>

            <ul class="nav">
                <li><a href="#home" class="active"><i class="fa fa-home"></i>Home</a></li>
                <li><a href="#about" ><i class="fa fa-user"></i>About</a></li>
                <li><a href="#services" ><i class="fa fa-list"></i>Services</a></li>
                <li><a href="#portfolio" ><i class="fa fa-briefcase"></i>Portfolio</a></li>
                <li><a href="#contact" ><i class="fa fa-comments"></i>Contact</a></li>
            </ul>
        </div>

        <div class="main-content">
            <section class="home section active" id="home">
                <div class="container">
                    <div class="row">
                        <div class="home-info padd-15">
                            <h3 class="hello">Hello, my name is <span class="name">Leo Souza</span></h3>
                            <h3 class="profession">I'm a <span class="typing">Web Designer</span></h3>
                            <p>I'm a web designer with extensive experience for over 10 years. My experience is to create website designs, graphic designs and much more...</p>
                            <a href="#" class="btn ">Download CV</a>
                        </div>

                        <div class="home-img padd-15">
                            <img src="https://i.postimg.cc/PJbckj4M/hero.jpg" alt="hero image">
                        </div>
                    </div>
                </div>
            </section>

            <section class="about section " id="about">
                <div class="container">
                    <div class="row">
                        <div class="section-title padd-15">
                            <h2>About me</h2>
                        </div>
                    </div>

                    <div class="row">
                        <div class="about-content padd-15">
                            <div class="row">
                                <div class="about-text padd-15">
                                    <h3>I'm Leo Souza and <span>Web Designer</span></h3>
                                    <p>As a web designer, I'm specialized in creating visually appealing websites that not only captivate visitors but also provide seamless navigation and functionality.  I continuously seek inspiration from current design trends and am committed to honing my skills through ongoing learning and experimentation. My ultimate goal is to craft digital experiences that engage users and drive results for my clients</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="personal-info padd-15">
                                    <div class="row">
                                        <div class="info-item padd-15">
                                            <p>Birthday: <span>02 Nov 2000</span></p>
                                        </div>

                                        <div class="info-item padd-15">
                                            <p>Age: <span>24</span></p>
                                        </div>

                                        <div class="info-item padd-15">
                                            <p>Website: <span>www.domain.com</span></p>
                                        </div>

                                        <div class="info-item padd-15">
                                            <p>Email: <span>info@gmail.com</span></p>
                                        </div>

                                        <div class="info-item padd-15">
                                            <p>Degree: <span>CS</span></p>
                                        </div>

                                        <div class="info-item padd-15">
                                            <p>Phone: <span>+17 678 1999</span></p>
                                        </div>

                                        <div class="info-item padd-15">
                                            <p>City: <span>São Paulo</span></p>
                                        </div>

                                        <div class="info-item padd-15">
                                            <p>Freelance: <span>Available</span></p>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="buttons padd-15">
                                            <a href="#contact" class="btn hire-me" data-section-index="1">Hire me!</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="skills padd-15">
                                    <div class="row">
                                        <div class="skill-item padd-15">
                                            <h5>CSS</h5>
                                            <div class="progress">
                                                <div class="progress-in" style="width: 76%;"></div>
                                                <div class="skill-percent">76%</div>
                                            </div>
                                        </div>

                                        <div class="skill-item padd-15">
                                            <h5>JS</h5>
                                            <div class="progress">
                                                <div class="progress-in" style="width: 86%;"></div>
                                                <div class="skill-percent">86%</div>
                                            </div>
                                        </div>

                                        <div class="skill-item padd-15">
                                            <h5>PHP</h5>
                                            <div class="progress">
                                                <div class="progress-in" style="width: 66%;"></div>
                                                <div class="skill-percent">66%</div>
                                            </div>
                                        </div>

                                        <div class="skill-item padd-15">
                                            <h5>HTML</h5>
                                            <div class="progress">
                                                <div class="progress-in" style="width: 96%;"></div>
                                                <div class="skill-percent">96%</div>
                                            </div>
                                        </div>

                                        <div class="skill-item padd-15">
                                            <h5>Bootstrap</h5>
                                            <div class="progress">
                                                <div class="progress-in" style="width: 76%;"></div>
                                                <div class="skill-percent">76%</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="education padd-15">
                                    <h3 class="title">Education</h3>
                                    <div class="row">
                                        <div class="timeline-box padd-15">
                                            <div class="timeline shadow-dark">
                                                <div class="timeline-item">
                                                    <div class="circle-dot"></div>
                                                    <h3 class="timeline-date">
                                                        <i class="fa fa-calendar"></i> 2013 - 2015
                                                    </h3>
                                                    <h4 class="timeline-title">Master in Computer Science</h4>
                                                    <p class="timeline-text">I learnt a wide range of topics that are essential to understanding both the theory and practical aspects of computing. This involves programming fundamentals, computer architecture, operating systems, databases, software engineering, problem solving, collaboration and communication soft skills.</p>
                                                </div>

                                                <div class="timeline-item">
                                                    <div class="circle-dot"></div>
                                                    <h3 class="timeline-date">
                                                        <i class="fa fa-calendar"></i> 2011 - 2014
                                                    </h3>
                                                    <h4 class="timeline-title">Master Degree</h4>
                                                    <p class="timeline-text">I chose my master degree in technology. There I deepened my knowledge, enhanced my skills in the area and learnt how to increase my career prospects in a competitive job market.</p>
                                                </div>

                                                <div class="timeline-item">
                                                    <div class="circle-dot"></div>
                                                    <h3 class="timeline-date">
                                                        <i class="fa fa-calendar"></i> 2007 - 2010
                                                    </h3>
                                                    <h4 class="timeline-title">Bachelor Degree</h4>
                                                    <p class="timeline-text">There I learnt foundational courses and computer sciences fundamentals. In the institution, I chose my specialization in web-development that involves front-end and back-end technologies, user interface designs and content management systems.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="experience padd-15">
                                    <h3 class="title">Experience</h3>
                                    <div class="row">
                                        <div class="timeline-box padd-15">
                                            <div class="timeline shadow-dark">
                                                <div class="timeline-item">
                                                    <div class="circle-dot"></div>
                                                    <h3 class="timeline-date">
                                                        <i class="fa fa-calendar"></i> 2020 - Today
                                                    </h3>
                                                    <h4 class="timeline-title">Senior Front-end Designer</h4>
                                                    <p class="timeline-text">I can design complex software systems. My decisions impact scalability, maintainability, and overall system architecture. Also, I mentor less experienced team members, helping them grow and learn.</p>
                                                </div>

                                                <div class="timeline-item">
                                                    <div class="circle-dot"></div>
                                                    <h3 class="timeline-date">
                                                        <i class="fa fa-calendar"></i> 2017 - 2019
                                                    </h3>
                                                    <h4 class="timeline-title">Junior Front-end Designer</h4>
                                                    <p class="timeline-text">I learnt to code in an existing codebase, dive into the project and understanding its structure. Also I worked closely with senior software engineers that guided me, answered my questions and helped me grow.</p>
                                                </div>

                                                <div class="timeline-item">
                                                    <div class="circle-dot"></div>
                                                    <h3 class="timeline-date">
                                                        <i class="fa fa-calendar"></i> 2014 - 2016
                                                    </h3>
                                                    <h4 class="timeline-title">Graphic Designer</h4>
                                                    <p class="timeline-text">I can create logos, color schemes and typography for a brand's identity. Also I develop graphics for websites, social media and digital ads with applications that enhance user experience.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="service section " id="services">
                <div class="container">
                    <div class="row">
                        <div class="section-title padd-15">
                            <h2>Services</h2>
                        </div>
                    </div>

                    <div class="row">
                        <div class="service-item padd-15">
                            <div class="service-item-inner">
                                <div class="icon">
                                    <i class="fa fa-mobile-alt"></i>
                                </div>
                                <h4>Web Design</h4>
                                <p>I offer custom website designs, responsive design to ensure compatibility across devices, and UI/UX design to enhance user experience</p>
                            </div>
                        </div>

                        <div class="service-item padd-15">
                            <div class="service-item-inner">
                                <div class="icon">
                                    <i class="fa fa-laptop-code"></i>
                                </div>
                                <h4>Graphic Design</h4>
                                <p>I design logos, icons, illustrations, and other visual assets that enhance the website's branding and aesthetic appeal</p>
                            </div>
                        </div>

                        <div class="service-item padd-15">
                            <div class="service-item-inner">
                                <div class="icon">
                                    <i class="fa fa-palette"></i>
                                </div>
                                <h4>Digital Marketing</h4>
                                <p>I build websites that enhances visual aesthetics, user experience, SEO, responsive design and mainly conversion optimization</p>
                            </div>
                        </div>

                        <div class="service-item padd-15">
                            <div class="service-item-inner">
                                <div class="icon">
                                    <i class="fa fa-code"></i>
                                </div>
                                <h4>UI/UX Solutions</h4>
                                <p>I offer custom research and design to increase your customer satisfaction and obtain higher conversion rates</p>
                            </div>
                        </div>

                        <div class="service-item padd-15">
                            <div class="service-item-inner">
                                <div class="icon">
                                    <i class="fa fa-search"></i>
                                </div>
                                <h4>Brand Consultancy</h4>
                                <p>I build brands through cultural insights & strategic vision. Custom crafted business solution</p>
                            </div>
                        </div>

                        <div class="service-item padd-15">
                            <div class="service-item-inner">
                                <div class="icon">
                                    <i class="fa fa-bullhorn"></i>
                                </div>
                                <h4>Photography</h4>
                                <p>I make high-quality photos of any category at a professional level.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="portfolio section " id="portfolio">
                <div class="container">
                    <div class="row">
                        <div class="section-title padd-15">
                            <h2>Portfolio</h2>
                        </div>
                    </div>

                    <div class="row">
                        <div class="portfolio-heading padd-15">
                            <h2>My Last Projects: </h2>
                        </div>
                    </div>

                    <div class="row">
                        <div class="portfolio-item padd-15">
                            <div class="portfolio-item-inner shadow-dark">
                                <div class="portfolio-img">
                                    <img src="https://i.postimg.cc/NGkQB1Y0/portfolio-1.jpg" alt="portfolio image">
                                </div>
                            </div>
                        </div>

                        <div class="portfolio-item padd-15">
                            <div class="portfolio-item-inner shadow-dark">
                                <div class="portfolio-img">
                                    <img src="https://i.postimg.cc/ydg49Z3w/portfolio-2.jpg" alt="portfolio image">
                                </div>
                            </div>
                        </div>

                        <div class="portfolio-item padd-15">
                            <div class="portfolio-item-inner shadow-dark">
                                <div class="portfolio-img">
                                    <img src="https://i.postimg.cc/RVPdrbDL/portfolio-3.jpg" alt="portfolio image">
                                </div>
                            </div>
                        </div>

                        <div class="portfolio-item padd-15">
                            <div class="portfolio-item-inner shadow-dark">
                                <div class="portfolio-img">
                                    <img src="https://i.postimg.cc/25dBY15N/portfolio-4.jpg" alt="portfolio image">
                                </div>
                            </div>
                        </div>

                        <div class="portfolio-item padd-15">
                            <div class="portfolio-item-inner shadow-dark">
                                <div class="portfolio-img">
                                    <img src="https://i.postimg.cc/RZBHD1ML/portfolio-5.jpg" alt="portfolio image">
                                </div>
                            </div>
                        </div>

                        <div class="portfolio-item padd-15">
                            <div class="portfolio-item-inner shadow-dark">
                                <div class="portfolio-img">
                                    <img src="https://i.postimg.cc/3wP7t1hK/portfolio-6.jpg" alt="portfolio image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="contact section" id="contact">
                <div class="container">
                    <div class="row">
                        <div class="section-title padd-15">
                            <h2>Contact</h2>
                        </div>
                    </div>

                    <h3 class="contact-title padd-15">Any Question? Contact us!</h3>
                    <h4 class="contact-subtitle padd-15">I'm at your service</h4>

                    <div class="row">
                        <div class="contact-info-item padd-15">
                            <div class="icon"><i class="fa fa-phone"></i></div>
                            <h4>Call us on</h4>
                            <p>+92 333 054 5218</p>
                        </div>


                        <div class="contact-info-item padd-15">
                            <div class="icon"><i class="fa fa-map-marker-alt"></i></div>
                            <h4>Office</h4>
                            <p>São Paulo</p>
                        </div>

                        <div class="contact-info-item padd-15">
                            <div class="icon"><i class="fa fa-envelope"></i></div>
                            <h4>Email</h4>
                            <p>info@gmail.com</p>
                        </div>

                        <div class="contact-info-item padd-15">
                            <div class="icon"><i class="fa fa-globe"></i></div>
                            <h4>Website</h4>
                            <p>www.domain.com</p>
                        </div>
                    </div>
                    <h3 class="contact-title padd-15">Send me an email</h3>
                    <h4 class="contact-subtitle padd-15">I'll contact you as soon as possible!</h4>

                    <div class="row">
                        <div class="contact-form padd-15">
                            <div class="row">
                                <div class="form-item col-6 padd-15">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Name">
                                    </div>
                                </div>

                                <div class="form-item col-6 padd-15">
                                    <div class="form-group">
                                        <input type="email" class="form-control" placeholder="Email">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-item col-12 padd-15">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Subject">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-item col-12 padd-15">
                                    <div class="form-group">
                                        <textarea name="message" id="message" class="form-control" placeholder="Message"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-item col-12 padd-15">
                                    <div class="form-group">
                                        <button type="submit" class="btn">Send Message</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div class="style-switcher">
        <div class="style-switcher-toggler s-icon">
            <i class="fas fa-cog fa-spin"></i>
        </div>

        <div class="day-night s-icon">
            <i class="fas "></i>
        </div>

        <h4>Theme Colors</h4>

        <div class="colors">
            <span class="color-1" onclick="setActiveStyle('color-1')"></span>
            <span class="color-2" onclick="setActiveStyle('color-2')"></span>
            <span class="color-3" onclick="setActiveStyle('color-3')"></span>
            <span class="color-4" onclick="setActiveStyle('color-4')"></span>
            <span class="color-5" onclick="setActiveStyle('color-5')"></span>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>
